<!-- 新增法律实体弹出框 -->
<template>
  <a-modal
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :width="800"
    title-align="center"
    :footer="type !== 'detail'"
    unmount-on-close
  >
    <template #title> {{ props.title }} </template>
    <div>
      <a-form
        :model="form"
        ref="LegalEntityForm"
        :rules="rules"
        :disabled="type === 'detail'"
      >
        <a-form-item field="name" label="公司名称" required show-colon>
          <a-input
            placeholder="请输入公司名称"
            v-model="form.name"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="lawId" label="类型" required show-colon>
          <a-select v-model="form.lawId">
            <a-option v-for="item in legalList" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="code" label="统一社会信用代码" required show-colon>
          <a-input
            placeholder="请输入统一社会信用代码"
            v-model="form.code"
          ></a-input>
        </a-form-item>
        <a-form-item label="报税区域" show-colon>
          <a-input placeholder="请输入报税区域" v-model="form.region"></a-input>
        </a-form-item>
        <a-form-item label="地址" show-colon>
          <a-input placeholder="请输入地址" v-model="form.address"></a-input>
        </a-form-item>
        <a-form-item label="电话" field="phone" show-colon>
          <a-input placeholder="请输入电话" v-model="form.phone"></a-input>
        </a-form-item>
        <a-form-item label="开户银行" show-colon>
          <a-input placeholder="请输入开户银行" v-model="form.bank"></a-input>
        </a-form-item>
        <a-form-item label="银行账号" show-colon>
          <a-input
            placeholder="请输入银行账号"
            v-model="form.bankNumber"
          ></a-input>
        </a-form-item>
        <a-form-item label="备注" show-colon>
          <a-textarea
            v-model="form.remark"
            placeholder="请输入备注"
            allow-clear
          />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
// import { reactive, computed, watchEffect } from 'vue';
import { validateRules } from '@/utils/common';
import { CheckLegalEntityList } from '@/apis/management/organization/organizationManagement/LegalEntity/index';
import { getLegalEntityTypeList } from '@/apis/management/organization/baseSetting/LegalEntityType/index';
import { cloneDeep } from 'lodash';
const props = withDefaults(
  defineProps<{
    visible: boolean;
    data: any;
    title: string;
    type: 'add' | 'edit' | 'detail';
  }>(),
  {}
);

const LegalEntityForm = ref();
const emit = defineEmits(['update:visible', 'addLegalEntity']);

// // 判断用户是否显示弹出框
// const modalVisible = computed({
//   get() {
//     return props.visible;
//   },
//   async set(visible: boolean) {
//     if (await LegalEntityForm.value.validate()) return;
//     emit('update:visible', visible);
//   }
// });

// 校验名字查重
const validateName = async (val: string, cb: any) => {
  try {
    if (val === props.data.name && form.value.id) {
      //
    } else {
      const data = {
        name: val
      };
      const res = await validateRules(CheckLegalEntityList, data);
      if (res.code) {
        cb(`${res.msg}`);
      }
    }
  } catch (error: unknown) {
    console.log(error);
  }
};

const rules = {
  name: [
    {
      required: true,
      message: '请输入公司名称'
    },
    {
      validator: validateName
    }
  ],
  lawId: [
    {
      required: true,
      message: '请选择类型'
    }
  ],
  code: [
    {
      required: true,
      message: '请输入统一社会信用代码'
    },
    {
      match: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
      message: '请输入正确的统一社会信用代码(14位数，仅限于英文+数字)'
    }
  ],
  phone: [
    {
      required: true,
      message: '请输入电话号码：'
    },
    {
      match:
        /^(?:(?:\+|00)86)?1\d{10}$|^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/,
      message: '请输入正确的电话号码(如果是座机请使用-连接，例如xxxx-xxxxxxxx)'
    }
  ]
};

const form = ref<any>({
  name: '',
  code: '',
  region: '',
  address: '',
  phone: '',
  bank: '',
  bankNumber: '',
  remark: '',
  lawId: undefined
});

const legalList: any = ref([]);

const getData = async () => {
  const res: any = await getLegalEntityTypeList({
    page: 1,
    size: -1,
    type: 1
  });
  legalList.value = res.content.filter((el: any) => el.isEnable === 1);
};

// 确定
const handleOk = async (e) => {
  const res = await LegalEntityForm.value.validate();
  if (res) {
    return;
  } else {
    const temp = cloneDeep(form.value);
    temp.phone = temp.phone + '';
    // temp.bankNumber = temp.bankNumber + '';
    if (props.title === '新增法律实体') {
      emit('addLegalEntity', temp, 'add');
    } else if (props.title === '编辑法律实体') {
      emit('addLegalEntity', temp, 'edit');
    }
    emit('update:visible', false);
    // modalVisible.value = false;
    form.value = {
      name: '',
      code: '',
      region: '',
      address: '',
      phone: '',
      bank: '',
      bankNumber: '',
      remark: '',
      lawId: undefined
    };
  }
};

// 取消
const handleCancel = () => {
  emit('update:visible', false);

  form.value = {
    name: '',
    code: '',
    region: '',
    address: '',
    phone: '',
    bank: '',
    bankNumber: '',
    remark: '',
    lawId: undefined
  };
};

watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      getData();
      if (props.data.id) form.value = cloneDeep(props.data);
      // form.value.phone = form.value.phone;
      // form.value.bankNumber = +form.value.bankNumber;
      console.log('form.value', form.value);
    }
  }
);
</script>

<style scoped lang="less"></style>
